<template>
  <div>
    <a-card class="card-header">
      <a-form-model :model="queryParam">
        <a-row :gutter="24">
          <a-col :span="5">
            <a-form-model-item
              label="机床编号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                :open="false"
                :defaultOpen="false"
                mode="multiple"
                :allowClear="true"
                placeholder="请输入机床编号"
                v-model="queryParam.equipmentNumber"
                @dropdownVisibleChange="handleDepar"
                @change="handleDeparChange"
              >
                <a-select-option
                  v-for="item in tableOption"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.customerName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item
              label="加工单号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-model.trim="queryParam.worksheetNum"
                placeholder="请输入计划单号"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item
              label="状态"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                allowClear
                style="width:100%"
                v-model.trim="queryParam.wsRelationState"
                placeholder="请选择状态"
              >
                <a-select-option
                  v-for="item in selectOptions"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="2">
            <a-button
              type="primary"
              style="margin-top:3px"
              @click="handleSearch"
              >查询</a-button
            >
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <a-card class="card-content">
      <div class="contetnBox">
        <a-row :gutter="24" class="headerBox">
          <a-col :span="2" push="22">
            <a-button type="primary" @click="handleAllList('Getsheetool')"
              >全部加工单</a-button
            >
          </a-col>
        </a-row>
        <br />
        <a-table
          :columns="columns"
          :data-source="tableData"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
          bordered
        >
          <template slot="action" slot-scope="text, record">
            <a-button
              type="primary"
              :disabled="record.disabled"
              @click="handleToDetail('/punch/detail', record)"
            >
              {{
                record.equipmentIsUsed == 0 || record.equipmentIsUsed == null
                  ? "上机"
                  : "下机"
              }}
            </a-button>
            <a @click="handleTo('/punch/detail', record)">查看</a>
            <a-modal
              ok-text="确认"
              cancel-text="取消"
              :maskClosable="false"
              :destroyOnClose="true"
              v-model.trim="visible"
              title="Basic Modal"
              @ok="handleOk('/punch/detail', record)"
              :ok-button-props="{ props: { disabled } }"
            >
              <p>上道工序产出数</p>
            </a-modal>
          </template>
        </a-table>
      </div>
    </a-card>

    <DemoModal ref="modalForm" @ok="modalFormOk"></DemoModal>
    <TableModal
      :columns="column"
      :replaceFields="replaceFields"
      :treeKey="treeKey"
      :searchKey="searchKey"
      :tableKey="tableKey"
      :name="name"
      :code="code"
      :filename="filename"
      ref="tableModal"
      :mode="mode"
      @tableSelect="tableSelect"
    ></TableModal>
  </div>
</template>

<script>
import { columns, column } from "./components/tableConfig";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import DemoModal from "./components/PunchModal.vue";
import TableModal from "@/components/TableSelectModal";
import api from "@/api/apiServer";

export default {
  components: { DemoModal, TableModal },
  mixins: [tableMinxins],
  data() {
    return {
      columns,
      tableData: [],
      visible: false,
      disabled: false,
      useId: "",
      isStr: "开机",
      tableOption: [],
      replaceFields: {
        children: "equipmentTypeList",
        title: "equipmentTypeName",
        key: "id"
      },
      treeKey: "equipmentTypeList",
      tableKey: "equipmentListPage",
      searchKey: "equipmentType",
      name: "equipmentName",
      code: "equipmentNumber",
      mode: "radio",
      filename: "EquipMentModal",
      column,
      selectOptions: [
        {
          name: "未完成",
          id: 0
        },
        {
          name: "已完成",
          id: 1
        }
      ]
    };
  },
  computed: {},
  activated() {
    this.getList();
  },
  mounted() {
    this.queryParam.equipmentNumber = this.$route.query.equipmentNumber;
    this.getList();
    // this.wsRelationId = this.$route.query.EquipmentNumber;
  },
  computed: {
    roleId() {
      return this.$store.state.mes.userInfo.roleId;
    }
  },
  methods: {
    // 新增
    modalAdd() {
      this.modalEdit(this.model);
    },
    // 获取列表数据
    async getList(arg) {
      let that = this;
      if (arg === 1) {
        this.pagination.current = 1;
      }
      var params = this.getQueryParams();
      // let params = {
      //   Equipnumber: this.queryParam.toolNum,
      // };
      const res = await api.Getsheetool(params);
      this.useId = JSON.parse(localStorage.getItem("userInfo")).id;
      this.tableData = res.data.data;
      let bool = this.tableData.some(item => item.equipmentIsUsed == 1);
      // console.log(bool, "44");
      // console.log(this.useId);
      if (bool) {
        if (that.roleId === "1") {
          console.log("管理员");
          this.tableData.forEach(item => {
            that.$set(item, "disabled", false);
          });
        } else {
          this.tableData.forEach(item => {
            if (item.equipmentUserId == that.useId) {
              // console.log(item.equipmentIsUsed,"ll");
              if (item.equipmentIsUsed == 1) {
                // console.log(9);
                that.$set(item, "disabled", false);
              } else {
                that.$set(item, "disabled", true);
              }
            } else {
              if (item.equipmentIsUsed == 1) {
                that.$set(item, "disabled", true);
              } else {
                that.$set(item, "disabled", false);
              }
            }
          });
        }
      } else {
        this.tableData.forEach(item => {
          that.$set(item, "disabled", false);
        });
      }
      this.pagination.total = res.data.total;
      this.loading = false;
    },
    // 删除
    async handleDelete(record) {
      const res = await api.orderDelete({
        id: record.id
      });
      this.getList();
      this.$message.success(res.message);
    },
    //开工
    async handleToDetail(path, record) {
      console.log(1);
      let that = this;
      if (record.equipmentIsUsed == 0 || record.equipmentIsUsed == null) {
        // let { equipId, processId, workStageId } = record;
        let { equipId, wsRelationId } = record;
        let params = {
          userId: that.useId,
          roleId: that.roleId,
          equipId,
          wsRelationId
        };
        console.log(params);
        that.handleUpplane(params);

        // this.$router.push({ path, query });
      } else {
        if (record.equipmentUserId == this.useId) {
          let params = {
            userId: this.useId,
            equipId: record.equipId,
            roleId: that.roleId,
            wsRelationId: record.wsRelationId
          };
          const res = await api.Disembark(params);
          this.handleSearch();
          this.$message.warning(res.message);
        } else if (this.roleId == 1) {
          let params = {
            userId: this.useId,
            equipId: record.equipId,
            roleId: that.roleId,
            wsRelationId: record.wsRelationId
          };
          const res = await api.Disembark(params);
          this.handleSearch();
          this.$message.success(res.message);
        } else {
          this.$message.warning("不是本人下机失败");
        }
      }
    },
    handleTo(path, record) {
      let {
        wsRelationId,
        sort,
        worksheetId,
        equipmentUserId,
        wsRelationState
      } = record;
      let query = {
        wsRelationId,
        userId: this.useId,
        sort,
        worksheetId,
        equipmentUserId,
        wsRelationState
      };
      this.$router.push({ path, query });
    },
    //上机
    async handleUpplane(params) {
      const res = await api.upplane(params);
      console.log(res);
      this.$message.success(res.message);
      this.handleSearch();
    },
    handleDepar() {
      this.$refs.tableModal.title = "设备";
      this.$refs.tableModal.modalAdd();
      if (this.queryParam.equipmentNumber) {
        let arr = this.queryParam.equipmentNumber.toString().split(",");
        if (arr.length > 0) {
          let newArr = arr.map(item => {
            return Number(item);
          });
          this.$refs.tableModal.selectedRowKeys = newArr;
        } else {
          this.$refs.tableModal.selectedRowKeys = [];
        }
      }
    },
    tableSelect(result, tableOption) {
      this.tableOption = tableOption;
      this.$set(this.queryParam, "equipmentNumber", result[0].equipmentNumber);
    },
    handleDeparChange(value) {
      if (value.length > 0) {
        this.queryParam.equipmentNumber = value.toString();
      } else {
        delete this.queryParam.equipmentNumber;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 20px;
  }
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
